<!-- 点餐菜品详情列表 -->
<template>
	<view class="menu-list-container" ref="menuBox">
		<view
			class="menu-list"
			ref="menuList"
			:id="menu.menuName || ''"
			v-for="menu in menuList"
			:key="menu.menuId"
		>
			<view class="menu-list-title" ref="menuTitle">
				{{ menu.menuName || '' }}
			</view>
			<view
				class="menu-container"
				v-for="item in menu.menuItem"
				:key="item.itemId"
			>
				<img class="menu-img" src="" alt="">
				<view class="menu-info">
					<view class="menu-info-name">{{ item.itemName }}</view>
					<view class="menu-info-sale-okay">
						<span class="menu-info-sale">月售<span>{{ item.sale }}</span></span>
						<span class="menu-info-okay">赞<span>{{ item.okay }}</span></span>
					</view>
					<view class="menu-info-allPrice">
						<span class="menu-info-nowPrice">￥{{ item.newPrice }}</span>
						<span class="menu-info-oldPrice">￥{{ item.oldPrice }}</span>
					</view>
					<view class="menu-info-discount-number">
						<i class="el-icon-time menu-info-discount-icon"></i>
						<span class="menu-info-discount">{{ item.discount }}</span>
						<span class="menu-info-number">{{ item.number }}</span>
					</view>
				</view>
				<view class="menu-btn" @tap="addMenuToCart($event, item)">+</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	export default {
		// 监听滚动事件，实现左右联动
		onPageScroll(e) {
			let sumHeight = 0;
			for(let i = 0; i < this.$refs.menuList.length; i ++) {
				sumHeight += this.$refs.menuList[i].clientHeight;
				if(this.$refs.menuList[0].clientHeight >= e.target.scrollTop + 10) {
					this.$bus.$emit("menuNavClick", this.$refs.menuList[0].id);
				}
				if(sumHeight <= e.target.scrollTop + 10) {
					this.$bus.$emit("menuNavClick", this.$refs.menuList[i+1].id);
				}
			}
		},
		computed: {
			...mapState(["menuList"])
		},
		created() {
			this.getMenuList()
		},
		methods: {
			...mapActions(['getMenuList']),
			addMenuToCart(e, item) {
				e.target.style.backgroundColor = "#6eb";
				e.target.style.transform = `scale(1.2)`;
				// 新加数据
				
				setTimeout(() => {
					e.target.style.backgroundColor = "#F1A30F";
					e.target.style.transform = `scale(1)`;
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.menu-list-container {	
	  width: 70vw;
	  height: 100%;
	  .menu-list {
		  position: relative;
		  margin-right: 10px;
		  .menu-list-title {
			height: 20px;
			padding: 10px;
			margin-left: 10px;
			color: #fff;
			background-color: #eef;
			margin-bottom: 6px;
			margin-top: 6px;
			position: sticky;
			top: 0;
		  }
		  .menu-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 6px auto;
			.menu-img {
				width: 90px;
				height: 90px;
				background-color: aqua;
				margin-left: 10px;
			}
			.menu-info {
				width: 120px;
				.menu-info-name,
				.menu-info-sale-okay,
				.menu-info-allPrice {
					margin-bottom: 5px;
				}
				.menu-info-name {
					font-size: 16px;
					font-weight: bold;
				}
				.menu-info-sale-okay {
					font-size: 12px;
					color: #b2b2b2;
				}
				.menu-info-allPrice {
					.menu-info-nowPrice {
						color: #ee4b46;
					}
					.menu-info-oldPrice {
						font-size: 12px;
						text-decoration: line-through;
						color: #b2b2b2;
					}
				}
				.menu-info-discount-number {
					font-size: 12px;
					color: #bc96ac;
					.menu-info-discount-icon {
						font-size: 12px !important;
					}
				}
				.menu-info-sale,
				.menu-info-nowPrice,
				.menu-info-discount-icon,
				.menu-info-discount {
					margin-right: 8px;
				}
			}
			.menu-btn {
				width: 21px;
				height: 21px;
				line-height: 18px;
				border-radius: 50%;
				background-color: #f1a30f;
				color: #fff;
				font-size: 25px;
				font-weight: bold;
				text-align: center;
			}
		  }
	  }
	}
</style>